<template>
  <div class="count">
    <h2>Count组件:{{ count }}</h2>
    <p>总价格是:{{ totalPrice }}</p>
    <button @click="incrementCount">累加count</button>
    <button @click="incrementNCount(3)">累加Ncount</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "Count",
  data() {
    return {};
  },
  mounted() {
    console.log(this.$store);
  },
  computed: {
    ...mapState(["count", "num"]),

    ...mapGetters(["totalPrice"]),
  },
  methods: {
    incrementCount() {
      /* 
    $store提供了一个commit方法,专门用来提交mutations的,commit方法接受第一个参数就是mutations的事件类型
    */
      this.$store.commit("increment");
    },

    incrementNCount(n) {
        /* 
        commit方法接受第二个参数,就是想mutation事件函数中传递的参数载荷payload,在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读
       */
      this.$store.commit("incrementN", { n: n });
    },
  },
};
</script>

<style scoped>
.count {
  background: pink;
}
</style>